<demo>
支持异步加载
</demo>
<template>
  <div>
    <Cascader popoverHeight="300px"
              v-model:selected="selected"
              v-model:dataSource="dataSource"
              :loadData="loadData" />
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import Cascader from "../../lib/cascader/Cascader.vue";
import db from "../../lib/cascader/db";
export default {
  setup() {
    let selected = ref([]);
    let dataSource = ref([]);
    const ajax = (parentId = 0) => {
      return new Promise((reslove, reject) => {
        setTimeout(() => {
          let result = db.filter((item) => item.parent_id == parentId);
          result.forEach((node) => {
            if (db.filter((item) => item.parent_id === node.id).length > 0) {
              node.isLeaf = false;
            } else {
              node.isLeaf = true;
            }
          });
          reslove(result);
        }, 3000);
      });
    };

    ajax(0).then((data) => {
      dataSource.value = data;
    });

    const loadData = ({ id }, updateSource) => {
      ajax(id).then((result) => {
        updateSource(result);
      });
    };

    return {
      dataSource,
      selected,
      loadData,
    };
  },
  components: {
    Cascader,
  },
};
</script>

<style></style>
